<template>

    <div class="card-billing">
        <h3>
            <strong>Billing info</strong>
            <a @click="usdShipping()" v-if="option.shipping && tab == 'input'">Same as shipping address</a>
            <span style="flex:1"></span>
            <a v-if="addressList.length > 0">
                <span v-if="tab == 'input'" @click="setTab('select')">Address book ({{addressList.length}})</span>
                <span v-if="tab == 'select'" @click="setTab('input')">Back</span>
            </a>
        </h3>

        <CommonAddressForm v-if="tab == 'input'" v-model="addressForm" :rules="rules" @validate="updateValidate($event)" />

        <!-- <el-form v-if="tab == 'input'" class="address-form" :model="addressForm" :rules="rules" ref="form" autocomplete="off" @submit.native.stop="doSubmit($event)">

            <el-form-item label="Full name" prop="first_name">
                <el-input size="small" autocomplete="off" v-model="addressForm.first_name"></el-input>
            </el-form-item>

            <div style="width: 100%"></div>
            <el-form-item label="Phone (optional)" prop="phone">
                <el-input size="small" v-model="addressForm.phone"></el-input>
            </el-form-item>

            <el-form-item label="Email (optional)" prop="email">
                <el-input size="small" v-model="addressForm.email"></el-input>
            </el-form-item>

            <el-form-item label="Address line 1" prop="street">
                <el-input size="small" v-model="addressForm.street"></el-input>
            </el-form-item>

            <el-form-item label="Address line 2 (optional)" prop="district">
                <el-input size="small" v-model="addressForm.district"></el-input>
            </el-form-item>

            <el-form-item label="Country/Region" prop="country_code">
                <el-select size="small" v-model="addressForm.country_code" placeholder="Please select" @input="changeCountry" filterable>
                    <el-option v-for="item in country" :key="item[0]" :label="item[1]" :value="item[0]"></el-option>
                </el-select>
            </el-form-item>
            <div style="width: 100%"></div>

            <el-form-item label="State/Province (optional)" prop="state">
                <el-input size="small" v-model="addressForm.state"></el-input>
            </el-form-item>
            <div style="width: 100%"></div>

            <el-form-item label="City" prop="city" style="width: 25%; padding-right: 20px">
                <el-input size="small" v-model="addressForm.city"></el-input>
            </el-form-item>

            <el-form-item label="Postal/ZIP code" prop="post_code" style="width: 25%; padding-left: 0px">
                <el-input size="small" autocomplete="on" v-model="addressForm.post_code"></el-input>
            </el-form-item>
        </el-form> -->

        <ul class="address-list" v-if="tab== 'select'">
            <li v-for="item in addressList" :class="{ active: item.id == addressSelect }" :key="item.id" @click="setAddressActive(item)">
                <h4 v-text="item.first_name"></h4>
                <p v-text="item.phone"></p>
                <p v-text="item.email"></p>
                <p v-text="item.street"></p>
                <p v-text="item.district"></p>
                <p v-text="[item.city,item.state,item.post_code].filter(i=>i).join(',')"></p>
                <p v-text="item.country"></p>
            </li>
        </ul>

    </div>

</template>

<script>
import { getRules } from "@/utils/address-rules";

const rules2 = getRules();

// 手机不验证
rules2.phone.map(i => i.required && (i.required = false))
// 地址名称不验证
rules2.country = []

export default {
    props: {
        value: { type: Object, default: () => { return {} } },
        option: { type: Object, default: () => { return {} } },
    },
    data () {
        return {
            addressList: [],
            addressSelect: null,
            tab: 'input', // input|select
            rules: rules2,
            addressForbid: true,
            addressForm: {
                first_name: '', // string 姓名
                country_code: '', // string 国家（国际二字码 标准ISO 3166-2 ）
                country: '', // string 国家名称
                city: '', // string 城市
                state: '', // string  州/省
                district: '', // string 区、县（可对应为adress 2）
                street: '', // string 街道/详细地址（可对应为adress 1）
                email: '', // string 邮箱
                phone: '', // string 电话
                post_code: '', // string 邮编
            }
        };
    },

    watch: {
        addressForm: {
            deep: true,
            handler (newval) {
                this.$emit('input', newval)
            }
        },
    },

    methods: {

        // 表单验证
        formValidator () {
            if (this.tab == 'input') {
                this.$emit('validate', this.addressForbid)
            } else {
                const active = this.addressList.filter(i => i.id == this.addressSelect)
                this.$emit('validate', active.length == 0)
            }
        },

        // 更新验证
        updateValidate (forbid) {
            this.addressForbid = forbid;
            this.formValidator();
        },

        // 获取地址
        getAddresssList () {
            this.$http("address.search").then((response) => {
                this.addressList = response.data || [];
            })
        },
        // 使用收货地址做账单地址
        usdShipping () {
            const shipping = this.option.shipping || {}
            Object.keys(this.addressForm).map(key => this.addressForm[key] = shipping[key])
            this.formValidator();
        },

        // 修改地址
        setTab (tab) {
            this.tab = tab;
            if (this.tab == 'input') {
                this.$emit('input', this.addressForm)
                this.formValidator();
            } else {
                const active = this.addressList.filter(i => i.id == this.addressSelect)[0]
                if (active) {
                    this.$emit('input', active)
                    this.formValidator();
                } else {
                    const select = this.addressList[0]
                    this.addressSelect = select.id;
                    this.$emit('input', select)
                    this.formValidator();
                }
            }
        },
        // 选中地址
        setAddressActive (item) {
            this.addressSelect = item.id;
            this.setTab('select')
        },

    },
    created () {
        this.getAddresssList();
        this.formValidator();
    },
};
</script>
<style lang="scss" scoped>
.card-billing {
    h3 {
        margin-top: 22px;
        display: flex;
        & > strong {
            font-size: 18px;
            font-weight: bold;
            color: #000000;
            line-height: 22px;
            margin-right: 8px;
        }
        & > a {
            font-size: 14px;
            font-weight: 400;
            color: #3199bd;
            line-height: 22px;
            cursor: pointer;
        }
    }

    // .address-form::v-deep {
    //     margin: 16px -6px 0;
    //     .el-form-item {
    //         padding: 0 6px;
    //         margin-bottom: 22px;
    //     }
    //     .el-form-item__label {
    //         height: 14px;
    //         line-height: 14px;
    //         margin-bottom: 6px;
    //         font-size: 12px;
    //         font-weight: bold;
    //         color: #000000;

    //         &[for='first_name'] {
    //             text-align: left;
    //             position: relative;
    //             overflow: hidden;
    //             text-indent: -999em;
    //             width: 300px;
    //             &::after {
    //                 content: 'Cardholder name';
    //                 position: absolute;
    //                 left: 0;
    //                 top: 0;
    //                 text-indent: 0;
    //             }
    //         }
    //     }

    //     .el-form-item__error {
    //         top: 56px;
    //     }
    // }

    .address-form ::v-deep {
        margin: 30px -6px 0;
        position: relative;
        display: flex;
        flex-wrap: wrap;

        .el-form-item {
            padding: 0 6px;
            margin-bottom: 22px;
        }

        // .el-form-item__content {
        //     line-height: 32px;
        //     vertical-align: top;
        // }

        .el-form-item__label {
            height: 14px;
            line-height: 14px;
            font-size: 12px;
            margin-bottom: 6px;

            &[for='phone'] {
                visibility: hidden;
                & + .el-form-item__content::before {
                    content: 'Phone(optional)';
                    display: block;
                    position: absolute;
                    left: 0;
                    top: 0px;
                    font-size: 12px;
                    font-weight: bold;
                    color: #000;
                    line-height: 14px;
                }
            }
        }

        .el-form-item__error {
            word-break: normal;
            position: absolute;
            left: 0px;
            pointer-events: none;
            top: 54px;
            bottom: 0;
        }
    }
}

.address-list {
    margin-top: 36px;
    display: flex;
    flex-direction: column;

    li {
        cursor: pointer;
        box-sizing: border-box;
        flex: 0 1 auto;
        justify-content: flex-start;
        min-height: 260px;
        border: 2px solid #dcdcdc;
        margin-bottom: 18px;
        border-radius: 8px;
        padding: 32px 32px 24px;

        h4 {
            font-size: 36px;
            word-break: break-word;
            color: #000000;
            font-weight: 600;
            line-height: 42px;
            margin-bottom: 16px;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden; //溢出内容隐藏
            text-overflow: ellipsis; //文本溢出部分用省略号表示
            display: -webkit-box; //特别显示模式
            -webkit-line-clamp: 2; //行数
            line-clamp: 2;
            -webkit-box-orient: vertical; //盒子中内容竖直排列
        }

        p {
            margin-top: 0;
            font-size: 16px;

            color: #000;
            line-height: 34px;
            word-break: break-word;

            span {
                color: #555555;
            }
        }

        &:hover {
            box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.18);
        }

        &.active {
            cursor: default;
            background-color: #fafafa;
            border-color: #000;
            border-width: 2px;
        }
    }
}
</style>
